﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件的数据通信</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
        <fuqin></fuqin>
    </div>


    <template id="t1">
        <div>
            我是父组件:
            {{attr1}}  {{attr2}}
            <erzi :attr1="attr1" :attr3="attr3" @e-world="getData"></erzi>
        </div>
    </template>

    <template id="t2">
        <div>
            我是子组件:
            {{attr2}}  {{attr1}} {{attr3}}
            <button @click="send">将子组件的数据传递给父组件</button>
        </div>
    </template>

    <script>

       /***
        * 
        *  1. 子调父
        *       1) 子组件 内声明  props ，指定 要获取 哪些父组件的 数据
        *       2）在子组件的标签 上 声明 可以 属性对应关系  :attr1="attr1" :attr3="attr3"
        *  2. 父调子
        *       1）子组件内， this.$emit("自定义方法", 子组件的数据);
        *       2）父组件，通过 “自定义方法” 获取值
        * 
        * */

        var vm = new Vue({
            el: "#app",
            data: {

            },
            components: {
                "fuqin": {
                    template: "#t1",
                    data() {
                        return {
                            attr1: "我是父组件的数据",
                            attr2:"default",//用于接收子组件的值
                            attr3: "aaa",
                        }
                    },
                    methods: {
                        getData(attr2) {
                             this.attr2 = attr2;
                        }
                    },
                    components: {
                        "erzi": {
                            template: "#t2",
                            data() {
                                return {
                                    attr2: "我是子组件的数据"
                                }
                            },
                            props: ["attr1","attr3"], //props 可以是数组或对象，用于接收来自父组件的数据。 :attr1="attr1" :attr3="attr3" 
                            methods: {
                                send() {
                                    //通过erzi组件的对象，调用emit方法，触发了一个自定义的事件e-world，发送数据
                                    this.$emit("e-world", this.attr2);
                                }
                            }
                            ,// 组件也有生命周期，组件 mounted 之后，立马执行 向父组件 发送数组
                            //mounted() {
                            //    this.$emit("e-world", this.attr2);
                            //}
                        }
                    }
                }
            }
        });
    </script>

</body>

</html>